<template>
  <div class="shanghu">
    <van-nav-bar
      :zIndex="9999"
      placeholder
      custom-class="nav-bar"
      title-class="nav-bar-title"
      title="商品列表"
    />
    <div class="search-box">
      <div class="main">
        <div class="box">
          <a
            hover-class="none"
            :url="'/shop/productList/searchProdcut/searchProdcut?merchId=' + merchId"
            class="txt right"
          >
            <text class="icon"></text>
            <text>请输入商品名称</text>
          </a>
        </div>
      </div>
    </div>
    <div class="main-box">
      <scroll-view class="left-nav" scroll-y>
        <view
          class="nav-item"
          v-for="(item, index) of navList"
          :key="index"
          :class="{ active: index == specsIndex }"
          @click="onSpecsIndex(index)"
        >
          <div class="txt">{{ item.label }}</div>
        </view>
      </scroll-view>
      <scroll-view class="right-list" scroll-y @scrolltolower="scrolltolower">
        <div class="list-box">
          <a
              :url="'/shop/productDetails/productDetails?id=' + product.id"
              v-for="(product, index) in shopList"
              hover-class="none"
              :key="index"
          >
            <div class="item">
              <div>
                <div class="pic-box">
                  <img :src="product.cover_picture" class="img" />
                  <text class="tips" v-if="product.promote_tag">{{
                      product.promote_tag
                    }}</text>
                  <text class="inventory" v-if="product.is_sold_out === 1"
                  >售罄
                    <!-- <text class="triangle-box"></text> -->
                  </text>
                </div>
              </div>
              <div style="position: relative;width: 100%;">
                <div class="title">
                  {{ product.title }}
                </div>
                <div class="tag">
                  <div class="spike" v-if="product.special_tag">
                    {{ product.special_tag }}
                  </div>
                </div>
                <div class="price-info">
                  <div class="left">
                    <div class="present">
                      <text>美粉币</text>
                      <text class="number">{{
                          product.lowest_price_name
                        }}</text>
                    </div>
                    <div class="old" v-if="product.virtual_price">
                      {{ product.virtual_price }}
                    </div>
                  </div>
<!--                  <div class="right" v-if="product.virtual_sales">-->
<!--                    销量 {{ product.virtual_sales }}-->
<!--                  </div>-->
                </div>
              </div>
            </div>
          </a>
        </div>
        <uni-load-more
          :status="status"
          :icon-size="12"
          :content-text="contentText"
          v-if="total > 3"
        />
      </scroll-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import uniLoadMore from "@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue";
import productList from "@/shop/productList/productList.vue";
export default {
  components: { uniLoadMore },
  data() {
    return {
      merchId: null,
      specsIndex: 0,
      navList: [{
        label: '全部',
        id: 0,
      }],
      shopList: [],
      currentPage: 0,
      total: 10,
      pageSize: 15,
      status: "more",
      contentText: {
        contentdown: "上拉加载更多",
        contentrefresh: "加载中...",
        contentnomore: "没有更多了",
      },
    };
  },
  watch: {
    selectId() {
      // 分类id如果发生了改变，重新获取商品列表
      this.getProductList();
    },
  },
  computed: {
    selectId() {
      return this.navList[this.specsIndex].id;
    },
  },
  onLoad(options) {
    this.merchId = options.merchId;
    this.getProductCategory();
    this.getProductList()
  },
  methods: {
    scrolltolower() {
      this.getProductList();
    },
    onSpecsIndex(index) {
      this.specsIndex = index;
      this.currentPage = 0;
      this.total = 10;
    },
    async getProductCategory() {
      this.$api.getProductCategory({merchId: this.merchId}).then((res) => {
        if (res.code == 200) {

          let data = []

          for (let i = 0; i < res.data.length; i++) {
            let item = {
                  label: res.data[i].title,
                  id: res.data[i].id,
                }
            data.push(item);
          }
          this.navList = this.navList.concat(data)
          // this.selectId = res.data[this.specsIndex].id
        }
      });
    },
    getProductList() {
      if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
        this.status = "noMore";
        return;
      }
      this.status = "loading";
      this.$api
        .productList({
          productCategoryId: this.selectId,
          merchId: this.merchId,
          pageSize: this.pageSize,
          page: this.currentPage + 1,
        })
        .then((res) => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.currentPage++;
            if (this.currentPage == 1) {
              this.shopList = [];
            }
            this.shopList = this.shopList.concat(res.data.data);
          }
        });
    },
  },
};
</script>

<style lang="scss">
.shanghu {
  overflow: hidden;
  color: #666;
  font-size: 28rpx;
  .nav-bar-title {
    color: #fff;
  }
  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .search-box {
    height: 100rpx;
    .main {
      width: 100%;
      height: 100rpx;
      background: #fff;
      box-sizing: border-box;
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      z-index: 100;
      .box {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        height: 64rpx;
        border-radius: 30rpx;
        display: flex;
        box-shadow: 0 2rpx 10rpx 0 rgba(0, 0, 0, 0.2);
        .txt {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .left {
          flex: 0 0 140rpx;
          .icon {
            margin-left: 10rpx;
            flex: 0 0 16rpx;
            height: 16rpx;
            background: url(https://media.wxcwy.com/mini/images/dwxl_icon@2x.png) no-repeat center
              center;
            background-size: 100% 100%;
          }
        }
        .right {
          flex: 1;
          margin-left: -130rpx;
          .icon {
            margin-right: 15rpx;
            flex: 0 0 27rpx;
            height: 27rpx;
            background: url(https://media.wxcwy.com/mini/images/search_icon@2x.png) no-repeat center
              center;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
  .main-box {
    overflow: hidden;
    display: flex;
    .left-nav {
      flex: 0 0 160rpx;
      //height: calc(100vh - 110rpx - 84px);
      height: calc(100vh - 0rpx - 0px);
      background: #f4f4f4;
      .nav-item {
        height: 88rpx;
        text-align: center;
        box-sizing: border-box;
        padding: 24rpx 0;
        line-height: 40rpx;
        &.active {
          background: #ffffff;
          .txt {
            border-left: 6rpx solid #1772ff;
          }
        }
      }
    }
    .right-list {
      height: calc(100vh - 0rpx - 0px);
      flex: 1;
      .item {
        overflow: hidden;
        margin-bottom: 40rpx;
        padding: 0 30rpx;
        .pic {
          height: 260rpx;
          border-radius: 16rpx;
          overflow: hidden;
          position: relative;
          .tips {
            height: 38rpx;
            border-radius: 16rpx 0px 16rpx 0px;
            color: #ffffff;
            font-size: 26rpx;
            font-weight: normal;
            padding: 0 12rpx 0 34rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            background: #ee4130 url(https://media.wxcwy.com/mini/images/hot@2x.png) no-repeat 10rpx
              center;
            background-size: 21rpx 30rpx;
          }
        }
        .name {
          margin-top: 20rpx;
          color: #333333;
          font-size: 36rpx;
          font-weight: bold;
          line-height: 50rpx;
        }
        .brief {
          color: #666;
          font-size: 26rpx;
          width: 530rpx;
          line-height: 36rpx;
          margin-top: 10rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .info-box {
          line-height: 40rpx;
          margin-top: 14rpx;
          display: flex;
          // .icon {
          //   flex: 0 0 32rpx;
          //   height: 32rpx;
          //   margin-right: 16rpx;
          //   background-position: center center;
          //   background-repeat: no-repeat;
          //   background-size: 100% 100%;
          // }
          &.address {
            color: #ee4130;
            font-size: 26rpx;
            display: flex;
            align-items: center;
            .tag {
              height: 32rpx;
              line-height: 32rpx;
              border-radius:18rpx 18rpx 18rpx 0;
              border: 1px solid #D0D0D0;
              color: #666666;
              font-size: 22rpx;
              padding: 0 10rpx;
              margin-left: 12rpx;
            }
            .icon {
              background: rgba(238, 65, 48, 0.13);
              width: 36rpx;
              height: 36rpx;
              text-align: center;
              line-height: 36rpx;
              margin-right: 10rpx;
              // background-image: url(https://media.wxcwy.com/mini/images/dwbl_icon@2x.png);
            }
          }
          &.time {
            display: inline-block;
            background: rgba(23, 114, 255, 0.09);
            border-radius: 4rpx;
            align-items: center;
            height: 36rpx;
            padding: 0 12rpx;
            line-height: 36rpx;
            color: #1772ff;
            font-size: 24rpx;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 520rpx;
            .text {
              vertical-align: middle;
              display: inline-block;
            }
            .icon {
              display: inline-block;
              vertical-align: middle;
              width: 28rpx;
              height: 28rpx;
              background: url(https://media.wxcwy.com/mini/images/zjicon@2x.png) no-repeat;
              background-size: 100% 100%;
              margin-right: 8rpx;
            }
          }
        }
      }
    }
  }
}

.list-box {
  margin: 14rpx 0;
  overflow: hidden;
  .item {
    display: flex;
    margin-top: 20rpx;
    .pic-box {
      margin-right: 20rpx;
      .img{
        width: 240rpx;
        height: 240rpx;
        border-radius: 8rpx;
      }
      position: relative;
      .inventory {
        width: 100%;
        color: #fff;
        font-size: 24rpx;
        line-height: 44rpx;
        background: #9b9b9b;
        position: absolute;
        left: 0;
        bottom: 8rpx;
        text-align: center;
        border-bottom-left-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
        .triangle-box {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 36rpx 0 0 20rpx;
          border-color: transparent transparent transparent #9b9b9b;
          position: absolute;
          top: 0;
          right: -20rpx;
        }
      }
      .tips {
        position: absolute;
        top: 20rpx;
        left: 0;
        height: 34rpx;
        line-height: 34rpx;
        background: #ee4130;
        color: #fff;
        border-radius: 4rpx;
        padding: 0 20rpx;
        font-size: 24rpx;
      }
    }
    .title {
      line-height: 40rpx;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      font-size: 28rpx;
    }
    .tag{
      position: absolute;
      bottom:70rpx;
      .spike {
        width: fit-content;
        color: #ff7900;
        border: 1px solid #ff7900;
        border-radius: 6rpx;
        padding: 0 8rpx;
        margin-right: 20rpx;
        box-sizing: border-box;
      }
    }
    .price-info {
      height: 45rpx;
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: 12rpx;
      width: 100%;
      .left {
        display: flex;
        align-items: center;
        color: #ff7900;
        .number {
          font-size: 40rpx;
        }
        .old {
          color: #9f9f9f;
          text-decoration: line-through;
          margin-left: 11rpx;
        }
      }
      .right {
        color: #9f9f9f;
        font-size: 24rpx;
        line-height: 48rpx;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
